//
//  CustomTabbarView.swift
//  CustomTabbarView
//
//  Created by Ben on 2021/8/12.
//

import SwiftUI
// 导入SW
import SDWebImageSwiftUI

// 自定义tabbar的enum
enum CustomTabbar: String, CaseIterable {
    
    case home                   = "闲鱼"
    case niceplay               = "会玩"
    case message                = "消息"
    case mine                   = "我的"
    
    
    // TabBarItem的图标名称
    var iconName: String {
    
        switch self {
        case .home:
            return "tabbar_home"
        case .niceplay:
            return "tabbar_niceplay"
        case .message:
            return "tabbar_message"
        case .mine:
            return "tabbar_mine"
        }
    }
    
    // 默认图标
    var norIconName: String {
        return iconName + "_nor"
    }
    
    // 选中图标
    var selIconName: String {
        return iconName + "_sel"
    }
}

struct CustomTabbarView: View {
    
    var safeEdgeInsets: EdgeInsets
    
    @Binding var showIssue: Bool
    
    //  @Binding表示当该变量改变时，会通知外部属性，也就是说这个值是由外部传递进来的，那么在哪里传递呢？
    @Binding var currTab: CustomTabbar
    
    var body: some View {
        
        // 遍历CustomTabbar的子项，实现tabbaritem布局
        
        // HStack是一个水平布局的容器,这类容器对内部都有一个默认的间距，不希望使用的话就可以设置为0
        HStack(spacing: 0) {
            
            ForEach(CustomTabbar.allCases, id: \.rawValue) { item in
                
                // 自定义的tabBarItem需要可以点击
                // Button相当于UIButton
                Button {
                    currTab = item
                } label: {
                    // VStack是一个垂直布局的容器
                    VStack {
                        
                        Image(currTab == item ? item.selIconName : item.norIconName)
                        
                        // Text相当于UILabel
                        Text(item.rawValue)
                        // 设置字体，颜色
                            .font(.system(size: 12, weight: .bold))
                            .foregroundColor(Color.black.opacity(currTab == item ? 0.7 : 0.3))
                    }
                }
                // 让tabBarItem宽度等分
                .frame(maxWidth: .infinity)
                
                // 接下来插入发布闲置的按钮
                if item == .niceplay {
                    Button {
                       // 本期视频来完成”发闲置“按钮弹出的发布页面的UI，先看一下闲鱼的表现
                        
                        // 大致有以下几点
                        // 1：弹出和隐藏的时候，背景色有渐变
                        // 2：发布的几个操作菜单从底部弹出，有弹簧效果
                        // 3：关闭按钮有旋转，并伴随颜色的切换
                        
                        // 现在开始正式进入开发
                        // 触发显示发闲置页面
                        withAnimation {
                            showIssue.toggle()
                        }
                    } label: {
                        Image("tabbar_post_idle")
                        // 重新指定按钮图片的大小
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 75, height: 75)
                    }
                    // 让发布按钮向上10
                    .offset(y: -10)
                }
            }
        }
        // 再添加一个top的边距
        .padding(.top, 20)
        // 在自定义的tabbar内部添加一个底部的边距，高度等于安全区域底部的高度
        .padding(.bottom, safeEdgeInsets.bottom)
        // 接下来修改背景色，实现圆弧效果
        .background(

            // Canvas是SwiftUI 3中引入的新特性，仅支持iOS15以上版本

            Canvas { context, size in

                let width = size.width
                let height = size.height
                let midWidth = width * 0.5

                context.fill(Path { path in



                    // 先简单实现一个矩形填充

                    // 接下来利用贝塞尔曲线实现发布闲置按钮的凸起
                    path.move(to: CGPoint(x: 0, y: 30))

                    path.addLine(to: CGPoint(x: midWidth - 55, y: 30))

                    path.addCurve(to: CGPoint(x: midWidth, y: 5), control1: CGPoint(x: midWidth - 35, y: 30), control2: CGPoint(x: midWidth - 25, y: 5))
                    path.addCurve(to: CGPoint(x: midWidth + 55, y: 30), control1: CGPoint(x: midWidth + 25, y: 5), control2:  CGPoint(x: midWidth + 35, y: 30))

                    path.addLine(to: CGPoint(x: width, y: 30))
                    path.addLine(to: CGPoint(x: width, y: height))
                    path.addLine(to: CGPoint(x: 0, y: height))

                }, with: .color(.white))
            }
        )
    }
}
